<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in carouselChartData" :key="item.id">
        <img :src="item.pic_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <Goods :goodsList="hotGoods" title="热卖商品"></Goods>
    <Goods :goodsList="newGoods" title="最新商品"></Goods>
  </div>
</template>


<script setup>
import { ref, onMounted } from "vue";
import { getCarouselChartData, getGoodList } from "@/api/home";

// 轮播图数据
const carouselChartData = ref([]);

// 热卖商品
const hotGoods = ref([]);
// 新上架商品
const newGoods = ref([]);

// 生命周期 组件挂载完成
onMounted(async () => {
  let res = await getCarouselChartData({ limit: "10", page: "1" });
  carouselChartData.value = res.data.list;

  hotGoods.value = await (
    await getGoodList({ limit: "10", page: "1", sort: "sale" })
  ).data.list;
  newGoods.value = await (
    await getGoodList({ limit: "10", page: "1", sort: "recent" })
  ).data.list;
});
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  img {
    width: 100%;
  }
}
</style>